<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <a-form :form="form" >
          <a-form-item label="事项标题" :label-col="labelCol" :wrapper-col="wrapperCol">
            {{subject}}
          </a-form-item>
          <a-form-item label="接收人" :label-col="labelCol" :wrapper-col="wrapperCol">
              <div class="listSelectBox">
                <div class="listCard">
                  <a-tag v-for="item in toUsers" closable="true" @close="closeUser(item.userId)">
                    <a-icon type="user"/> {{item.fullname}}
                  </a-tag>
                </div>
                <a-button class="listButton" icon="user" @click="selectUsers" style="vertical-align: middle"></a-button>
              </div>

          </a-form-item>
          <a-form-item label="意见" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-textarea v-model="opinion" style="width: 100%"/>
          </a-form-item>
          <a-form-item label="通知方式" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-checkbox-group :options="msgOptions" v-model="msgTypes">
            </a-checkbox-group>
          </a-form-item>
     <!--     <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-button type="primary" @click="submitForm()">提交</a-button>
            <a-button type="link" @click="closeWindow()">关闭</a-button>
          </a-form-item>-->
        </a-form>
      </div>
    </rx-layout>

  </rx-dialog>
</template>

<script>
    import {Dialog,Util,RxLayout} from '@lowcode/jpaas-common-lib';
    import BpmtaskApi from "@/api/bpm/core/bpmTask";
    const msgOptions = [
        {label: '消息', value: 'InnerMsg'},
        {label: '短信', value: 'ShortMsg'},
        {label: '邮件', value: 'Email'},
        {label: '企业微信', value: 'EntWX'},
        {label: '钉钉', value: 'DingDing'}
    ];

    export default {
        name: "BpmInstCc",
        components:{RxLayout},
        props:{
            subject:String,
            taskId:String,
            instId:String,
            ccType:String,
            layerid: String,
            lydata: Object,
            destroy:Function
        },
        data () {
            return {
                labelCol: { span: 4 },
                wrapperCol: { span: 8 },
                opinion:'',
                msgOptions,
                msgTypes:[],
                toUsers:[],
                toUsers2:[

                ]
            }
        },
        methods:{
            selectUsers(){
                let self=this;
                Dialog.openUserDialog({
                    curVm: this,data:{single:false}, widthHeight: ['1400px', '600px']
                },function(self,data){
                  //  self.toUsers = data ;

                    for(let i=0;i<data.length;i++){
                        self.toUsers.push({userId:data[i].userId,fullname:data[i].fullname});
                    }
                })
            },
            closeUser(userId){
                for(let i=0;i<this.toUsers.length;i++){
                    if(this.toUsers[i].userId==userId){
                        this.toUsers.splice(i,1);
                        return;
                    }
                }
            },
            cancel(){
                Util.closeWindow(this,'cancel');
            },
            handleSubmit(){
                if(this.toUsers.length == 0 || this.opinion==''){
                    this.$message.error('请选择用户与填写意见！');
                    return ;
                }
                var userIds=[];
                this.toUsers.forEach(item=>{
                    userIds.push(item.userId);
                });

                BpmtaskApi.submitBpmInstCc({
                    instId:this.instId,
                    taskId:this.taskId,
                    ccType:this.ccType,
                    subject:this.subject,
                    toUserIds:userIds.join(','),
                    opinion: this.opinion,
                    msgTypes:this.msgTypes.join(',')
                }).then(resp=>{
                    Util.closeWindow(this,'ok');
                });
            }
        }
    }
</script>

<style scoped>
.listSelectBox{
  display: flex;
}
  .listCard{
    flex: 1;
    min-height: 32px;
    margin: 4px 10px 4px 0 ;
    padding:  0 4px;
    border: 1px solid #ddd;
    vertical-align: middle;
  }
  .listButton{
    margin: 4px 0;
  }
</style>